<template>
  <div class="import-black-detail">
    <el-tabs v-model="activeName">
      <el-tab-pane label="成功数据"
                   name="successData">
        <div class="table-wrap">
          <div class="page-wrap">
            <pagination class="page"
                        :small="true"
                        :currentPage="currentPageSuccess"
                        :count="countSuccess || 0"
                        :pageSize="pageSize"
                        :totalPage="totalPageSuccess"
                        @turnPage="turnPageSuccess">
            </pagination>
          </div>
          <el-table
            class="table"
            :data="tableDataSuccess">
            <el-table-column
              prop="Num"
              label="电话号码">
            </el-table-column>
            <el-table-column
              prop="typeName"
              label="名单类型">
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="重复数据"
                   name="failData">
        <div class="table-wrap">
          <div class="page-wrap">
            <pagination class="page"
                        :small="true"
                        :currentPage="currentPageRepeat"
                        :count="countRepeat || 0"
                        :pageSize="pageSize"
                        :totalPage="totalPageRepeat"
                        @turnPage="turnPageRepeat">
            </pagination>
          </div>
          <el-table
            class="table"
            :data="tableDataRepeat">
            <el-table-column
              prop="Num"
              label="电话号码">
            </el-table-column>
            <el-table-column
              prop="typeName"
              label="名单类型">
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import Pagination from '@/components/public-modules/card/Pagination'
  export default {
    data () {
      return {
        activeName: 'successData',
        tableDataRepeat: [],   //重复数据table相关
        currentPageRepeat: 1,
        countRepeat: 0,
        tableDataSuccess: [],  //成功数据table相关
        currentPageSuccess: 1,
        countSuccess: 0,
        pageSize: 10,
      }
    },
    props: {
      batchNo: {type: String, default: ''}
    },
    methods: {
      init () {
        this.currentPageSuccess = 1
        this.currentPageRepeat = 1
        this.searchSuccess()
        this.searchRepeat()
      },
      //      查询 成功数据
      searchSuccess () {
        let data = {}
        data.type = 'success'
        data.batchNo = this.batchNo
        data.page = this.currentPageSuccess
        data.limit = this.pageSize
        this.$store.dispatch('queryImportDataDetail', data).then(resp => {
          if (resp && resp.success) {
            this.tableDataSuccess = resp.list
            this.tableDataSuccess.forEach(item => {
              if (item.Type === '0') {
                item.typeName = '红名单'
              } else if (item.Type === '1') {
                item.typeName = '呼入黑名单'
              } else {
                item.typeName = '外呼黑名单'
              }
            })
            this.countSuccess = resp.count
          } else {
            this.$message.error('查询失败！')
          }
        })
      },
      //      查询 重复数据
      searchRepeat () {
        let data = {}
        data.type = 'repeat'
        data.batchNo = this.batchNo
        data.page = this.currentPageRepeat
        data.limit = this.pageSize
        this.$store.dispatch('queryImportDataDetail', data).then(resp => {
          if (resp && resp.success) {
            this.tableDataRepeat = resp.list
            this.tableDataRepeat.forEach(item => {
              if (item.Type === '0') {
                item.typeName = '红名单'
              } else if (item.Type === '1') {
                item.typeName = '呼入黑名单'
              } else {
                item.typeName = '外呼黑名单'
              }
            })
            this.countRepeat = resp.count
          } else {
            this.$message.error('查询失败！')
          }
        })
      },
      turnPageSuccess (val) {
        this.currentPageSuccess = val
        this.searchSuccess()
      },
      turnPageRepeat (val) {
        this.currentPageRepeat = val
        this.searchRepeat()
      }
    },
    computed: {
      totalPageSuccess () {
        return Math.ceil(this.countSuccess / this.pageSize) || 1
      },
      totalPageRepeat () {
        return Math.ceil(this.countRepeat / this.pageSize) || 1
      }
    },
    components: {
      Pagination
    },
    watch: {
      batchNo () {
        this.init()
      }
    },
    beforeMount () {
      this.init()
    }
  }
</script>

<style lang="stylus" scoped>
  .import-black-detail
    padding 0 20px
  .page-wrap
    border 1px solid #E7E7EB
    border-bottom none
    height 30px
    padding 8px 10px
  .page
    float right
</style>
